<template>
	<view class="content">
	
		<view class="header">
			<view class="mohu" v-show="ViewKou>=30">
				
			</view>
			<view class="zhanwei">
			</view>
			<view class="biao_ti">
				<text class="top-text">荟漫图坊</text>
				<navigator url="/pages/index/sousuo/SOU" class="sousuo" :style="ViewKou>=30?'background-color: rgba(227, 227, 227, 0.3);':'background-color: #1a1a1a;'">
					<image src="../../static/image/sousuo1.png" mode="scaleToFill"></image>
					搜索插图/漫画
				</navigator>
				
				
			</view>
		</view>
		<!-- 轮播图 -->
		.
		<view class="ba_nar">
			<swiper class="swiper" circular indicator-active-color="#fff" indicator-color="#c5c5c5"
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="https://xcx.xyhvip.cn/style/image/7.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://xcx.xyhvip.cn/style/image/8.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://xcx.xyhvip.cn/style/image/9.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- FLash动画 -->
		<view class="album">
			<view class="title-top" style="width: 93%;">
				<view class="T-h1"><image src="../../static/image/xiegang.png" mode="scaleToFill"></image>Flash</view>
				<view class="T-h2">共458张 <image src="../../static/image/youjiantou (3).png" mode="scaleToFill"></image>
			</view>
			</view>
			<scroll-view scroll-x="true" show-scrollbar="false" class="roll_right">
				<view class="Subframe" v-for="(item,index) in FLashList" :key="index" @click="FLASHdonghua(item)">
					<view class="cover_img">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 系列 -->
		<view class="Re_men">
			<view class="title-top">
				<view class="T-h1"><image src="../../static/image/xiegang.png" mode="scaleToFill"></image>系列</view>
				<view class="T-h2">共4张<image src="../../static/image/youjiantou (3).png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="xilie-t">
				<view class="Subframe" v-for="(item,index) in XilieList" :key="index" @click="xilieclick(item)">
					<view class="cover_img">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 类别 -->
		<view class="Re_men">
			<view class="title-top">
				<view class="T-h1"><image src="../../static/image/xiegang.png" mode="scaleToFill"></image>类别</view>
				<view class="T-h2">12类<image src="../../static/image/youjiantou (3).png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="song_sheet">
				<view class="Subframe" v-for="(item,index) in LeiBieList" :key="index" @click="LeiNVT(item)">
					<view class="cover_img">
						<image :src="item.detail_image" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 全部 -->
		<view class="Re_men">
			<view class="title-top">
				<view class="T-h1"><image src="../../static/image/xiegang.png" mode="scaleToFill"></image>全部插图</view>
				<view class="T-h2">更多<image src="../../static/image/youjiantou (3).png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="song_sheet">
				<view class="Subframe" v-for="(item,index) in QuanBuList" :key="index" @click="detailsUl(item.id)">
					<view class="cover_img">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//首页的id传值
	import W_request from '@/utis/api.js'
	export default {
		data() {
			return {
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 3600, //自动切换时间间隔
				duration: 500, //滑动动画时长
				list: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
				ViewKou:0,//存储窗口滚动的值
				FLashList:[],//FLash动画
				XilieList:[],//系列
				LeiBieList:[],//类别
				QuanBuList:[],//全部图片
				showid:0
			}
		},
		//监听滚动条
		onPageScroll(e) {
			this.ViewKou = e.scrollTop;
		},
		//页面触底
		onReachBottom(){
			if(this.QuanBuList.length>=200){
				console.log("超出100张，不给你显示了！要看自己去点更多");
			}else{
				const Houid = this.QuanBuList.length -1;
				console.log(this.QuanBuList[Houid].id);
				// this.showid = this.showid + 1;
				console.log(this.showid);
				uni.showLoading({
					title: '加载中',
					mask:true,
					success:()=>{
						//触底加载
						
						W_request({
							url:'/api/index/jiazai',
							data:{
								sortid:this.showid,
								id:this.QuanBuList[Houid].id,
							}
						}).then(res=>{
							
							uni.hideLoading();
							console.log(res)
							for (var i = 0; i < res.data.data.length; i++) {
								this.QuanBuList.push(res.data.data[i]);
								// console.log(this.QuanBuList);
							}
						},err=>{
							console.log(err);
							uni.hideLoading();
						});
					}
				});
			}
		},
		
		onLoad() {
			this.Qajax();
		},
		
		methods: {
			
			//请求
			Qajax(){
				// FLash动画
				W_request({
					url:'/api/index/flashs',
				}).then(res=>{
					console.log(res);
					this.FLashList = res.data.data;
				},err=>{
					console.log(err)
				});
				//系列
				W_request({
					url:'/api/index/sorts',
				}).then(res=>{
					console.log(res.data.data)
					this.XilieList = res.data.data;
				},err=>{
					console.log(err);
				});
				//类别
				W_request({
					url:'/api/index/fenlei',
				}).then(res=>{
					// console.log(res.data.data)
					this.LeiBieList = res.data.data;
				},err=>{
					console.log(err);
				});
				//全部
				W_request({
					url:'/api/index/all',
				}).then(res=>{
					// console.log(res.data.data)
					this.QuanBuList = res.data.data;
				},err=>{
					console.log(err);
				});
			},
			//全部图片
			detailsUl(e){
				console.log(e)
				uni.navigateTo({
					url:`../../chakan/FangDa?id=${e}`
				})
			},
			//系列
			xilieclick(e){
				console.log(e)
				uni.navigateTo({
					url:`./bangdan/Bang?id=${e.id}&num=${e.num}&title=${e.title}`
				})
			},
			//全部类别
			LeiNVT(e){
				console.log(e)
				uni.navigateTo({
					url:`./bangdan/Bang?id=${e.id}&title=${e.title}`
				})
			},
			//动画
			FLASHdonghua(e){
				console.log(e)
				uni.navigateTo({
					url:`../../chakan/FangDa?id=${e.id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	@font-face {
	  font-family: 'YouSheBiaoTiHei';
	  src: url('https://kuaiyinvideo.oss-cn-beijing.aliyuncs.com/ziti.ttf');
	}
	//共享标题
	.title-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	
		.T-h1 {
			font-size: 36rpx;
			color: #dfdfdf;
			font-family: "YouSheBiaoTiHei";
			display: flex;
			align-items: center;
			image{
				width: 35rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}
		}
	
		.T-h2 {
			font-size: 26rpx;
			color:rgb(222, 204, 1);
			display: flex;
			align-items: center;
			image {
				width: 25rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}
		}
	}
	
	.mohu{
		width: 100%;
		height: 100%;
		backdrop-filter: blur(8px);
		background-color: rgba(255, 255, 255, 0.1); /* 透明度为50%的白色背景 */
		position: absolute;
		z-index: 1;
		
	}
	.content {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.header{
			width: 100%;
			height:150rpx;
			// background-color: rgb(19, 20, 22);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 100;
			padding-bottom: 20rpx;
			.zhanwei{
				width: 100%;
				height: 100rpx;
			}
			.biao_ti{
				width: 93%;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 50;
				.top-text{ 
					font-size: 40rpx;
					color:rgb(250,233,5);
					font-family: "YouSheBiaoTiHei";
				}
				.sousuo{
					width: 300rpx;
					height: 70rpx;
					background-color: #1a1a1a;
					border-radius: 100rpx;
					display: flex;
					align-items: center;
					position: relative;
					font-size: 26rpx;
					color: #d0d0d0;
					margin-left: 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
						margin-right: 15rpx;
					}
				}
			}
			
		}
		
		//版纳
		.ba_nar {
			width: 100%;
			overflow: hidden;
			margin-top: 200rpx;
			
			.swiper {
				width: 100%;
				height: 300rpx;
				swiper-item{
					display: flex;
					align-items: center;
					justify-content: center;
					.swiper-item {
						width: 93%;
						height: 300rpx;
						overflow: hidden;
						border-radius: 25rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				
				
			}
		}
		//滚动 专区
		.album{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 25rpx;
			margin-bottom: 15rpx;
			.roll_right{
				width: 95%;
				overflow: hidden;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				white-space:nowrap;
				
				.Subframe {
					width: 28%;
					// background-color: #00ffff;
					overflow: hidden;
					display: flex;
					display:inline-block;
					flex-direction: column;
					align-items: center;
					margin-right: 20rpx;
					.cover_img {
						width: 100%;
						height: 200rpx;
						overflow: hidden;
						border-radius: 15rpx;
						background-color: #fff;
						image{
							width: 100%;
							height: 100%;
						}
					}
				
					.Copywriting {
						width: 100%;
						height: 70rpx;
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #383838;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 超出几行省略 */
					}
				}
			}
		}
		//正常
		.Re_men {
			width: 93%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-top: 25rpx;
		
			.song_sheet {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				overflow: hidden;
				justify-content: space-between;
				margin-top: 15rpx;
				.Subframe {
					width: 31%;
					height: 220rpx;
					// background-color: #00ffff;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20rpx;
					.cover_img {
						width: 100%;
						height: 220rpx;
						overflow: hidden;
						border-radius: 15rpx;
						background-color: #fff;
						image{
							width: 100%;
							height: 100%;
						}
					}
		
					.Copywriting {
						width: 100%;
						height: 70rpx;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #3b3b3b;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 超出几行省略 */
					}
				}
			}
		}
		
		.xilie-t{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			.Subframe{
				width: 48.2%;
				height: 200rpx;
				border-radius: 15rpx;
				overflow: hidden;
				margin-bottom: 25rpx;
				.cover_img{
					width: 100%;
					height: 100%;
					background-color: #fff;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
